<template>
	<view class="container">
		<u-cell-group class="cellGroup" :border="false" :title="info">
			<u-cell-item style="height: 20rpx;color: #000;" title="流速" :value="`${deviceInfo.flow}mL/min`"
				:arrow="false" :border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item style="height: 20rpx;color: #000;" title="压力" :value="`${deviceInfo.press}psig`" :arrow="false"
				:border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item v-if="deviceInfo.wind" style="height: 20rpx;color: #000;" title="风速" :value="`${deviceInfo.wind}m/s`" :arrow="false"
				:border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item v-if="deviceInfo.windDirection" style="height: 20rpx;color: #000;" title="风向" :value="`${deviceInfo.windDirection}`"
				:arrow="false" :border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item v-if="deviceInfo.airPress" style="height: 20rpx;color: #000;" title="大气压" :value="`${deviceInfo.airPress}psig`"
				:arrow="false" :border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item style="height: 20rpx;color: #000;" title="温度" :value="`${deviceInfo.temperature}℃`"
				:arrow="false" :border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item v-if="deviceInfo.humidity" style="height: 20rpx;color: #000;" title="湿度" :value="`${deviceInfo.humidity}%RH`"
				:arrow="false" :border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item style="height: 20rpx;color: #000;" title="经度" :value="`${deviceInfo.longitude}`" :arrow="false"
				:border-bottom="false" :value-style="valueStyle"></u-cell-item>
			<u-cell-item style="height: 20rpx;color: #000;" title="纬度" :value="`${deviceInfo.latitude}`" :arrow="false"
				:border-bottom="false" :value-style="valueStyle"></u-cell-item>
		</u-cell-group>
		<map id="map" class="map" :show-location="true" style="width: 100%"
			:latitude="deviceInfo.latitude" :longitude="deviceInfo.longitude" scale="16" :circles="circles"
			:markers="markers"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				_mapContext: null,
				circles: [],
				controls: [],
				markers: [],
				marker: null,
				deviceId: '3037',
				valueStyle: {
					color: '#000'
				},
				info:'基本信息',
				deviceInfo: {
					flow: 13.4,
					press: -13.4,
					wind: 10,
					windDirection: '南风',
					airPress: 0,
					temperature: 38,
					humidity: 70,
					longitude: 112.86307699999998,
					latitude: 28.22189400000001
				}

			}
		},
		onLoad: function(option) {
			this.deviceId = option.deviceId;
			this.info = `基本信息-${this.deviceId}`
			console.log(option.deviceId);
		},
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				this._mapContext = uni.createMapContext("map", this);
				this.marker = {
					id: this.deviceId,
					latitude: this.deviceInfo.latitude, //纬度
					longitude: this.deviceInfo.longitude, //经度
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: this.deviceId, //文本
						color: '#ffaa00', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 8, //边框圆角
						bgColor: '#fff', //背景颜色
						display: 'ALWAYS', //常显
					},
					iconPath: '/static/imgs/location.png', //	显示的图标
					width: 32,
					height: 32
				}
				this.markers.push(this.marker);
				this.circles = [{ //在地图上显示圆
						latitude: this.deviceInfo.latitude,
						longitude: this.deviceInfo.longitude,
						fillColor: "#3BBAFD29", //填充颜色（透明度）
						color: "#3BBAFD", //描边的颜色
						radius: 160, //半径
						strokeWidth: 2 //描边的宽度
					},
					{ //在地图上显示圆
						latitude: 36.647,
						longitude: 114.550,
						fillColor: "#3BBAFD29", //填充颜色
						color: "#3BBAFD", //描边的颜色
						radius: 100, //半径
						strokeWidth: 2 //描边的宽度 
					},
				]

			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top)); /* 视图高度 */
	}

	.cellGroup {
		padding-right: 20rpx;
		flex-shrink: 0;
	}

	.map {
		flex: 1;
	}

	.cellGroup u-cell-item {}
</style>